<template>
    <div class="myCollect">
        <div class="container-header">
            <router-link  to="/userInfo" class="header-left vip-icon icon-back" tag="div"></router-link>
            <div class="header-middle">我的特卖</div>
            <router-link to="/home" tag="div" class="header-right vip-icon icon-home"></router-link>
        </div>

        <div class="container-tab">
            <ul class="container-tab-uls">
                <li class="con">商品收藏</li>
                <router-link to="brandCollect" tag="li">品牌收藏</router-link>
                <li>我的足迹</li>
            </ul>
        </div>

        <div class="container-content">
            <ul class="container-content-uls">
                <li>
                    <div class="filterbar-container">
                        <ul>
                            <li :class="{'con':index == i}" v-for="(item,index) in lists" :key="index" @click="i = index">{{item}}</li>
                            
                        </ul>
                    </div>
                    <ul class="content-list">
                        <router-link to="/productDetail" tag="li" class="content-product-list" v-if="productList">
                           <img :src="productList.image" alt="">
                            <div class="product-right">
                                <div class="right-header">
                                    <span>特卖价</span>
                                    <i>￥{{productList.price.minPrice | minPriceInt}}</i>
                                    <div>￥{{productList.price.maxPrice}}</div>
                                    <b>{{productList.price.discounts}}折</b>
                                </div>
                                <div class="right-content-text">
                                    {{productList.shopName}} | {{productList.productTitle}}
                                </div>
                                <div class="right-content-bottom">
                                    <div><span>专属优惠券3</span></div>
                                    <div><i>唯品独家</i></div>
                                </div>
                            </div>
                        </router-link>
                        <li class="content-product-list" v-if="!productList">
                            <van-empty description="请添加收藏内容" />
                        </li>
                    </ul>
                </li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
</template>

<script>
import {getCollectProduct} from "../api/collect.js";
    export default {
        name:"myCollectView",
        data() {
            return {
                i:0,
                lists:["全部","11.11提前购","有货","已降价"],
                productList:null,
                id:null
            };
        },
        methods:{
            // 调用json数据方法
            getCollectProductFun(){
                getCollectProduct().then(data=>{
                    console.log(data);
                    let index = window.localStorage.getItem("product1");
                    // console.log(index);
                    // console.log(data[index]);
                    // this.productList.push(data[index]);
                    this.productList = data[index];
                    console.log(this.productList);
                })
            }
        },
        mounted(){
            this.getCollectProductFun();
            // this.id = window.localStorage.getItem("product1");
            // console.log(this.id);
        },
         filters:{
          "minPriceInt":function(value){
            return parseInt(value)
          }
        },
    }
</script>

<style lang="scss" scoped>
.myCollect{
    
    .container-header{
        width: 100%;
        height: 44px;
        display: flex;
        align-items: center;
        .header-left{
            width: 56px;
            height: 44px;
            text-align: center;
            line-height: 44px;
            font-size: 20px;
        }

        .header-middle{
            text-align: center;
            line-height: 44px;
            font-size: 18px;
            flex: 1;
        }
        .header-right{
            font-size: 20px;
            width: 56px;
            height: 44px;
            text-align: center;
            line-height: 44px;
        }
    }
    .container-tab{
        .container-tab-uls{
            width: 100%;
            height: 40px;

            display: flex;
            justify-content: space-evenly;

            li{
                width: 30%;
                text-align: center;
                height: 40px;
                font-size: 16px;
                line-height: 40px;
                border-bottom: 2px solid transparent;
                box-sizing: border-box;
                color: #585c64;
                &.con{
                    border-bottom: 2px solid rgb(222, 61, 150);
                    color: rgb(222, 61, 150);
                }
            }
        }
    }
    .container-content{
        margin-top: 10px;
        .container-content-uls{
            display: flex;
            flex-direction: column;
            width: 100%;

            .filterbar-container{
                display: flex;
                ul{
                    display: flex;
                    justify-content: space-evenly;
                    padding: 12.5px 15px;
                    box-sizing: border-box;
                    li{
                        
                        margin:0 5px;
                        width: 72px;
                        height: 25px;
                        border-radius: 12.5px;
                       overflow: hidden;
                       text-align: center;
                       line-height: 25px;
                       background-color: #f3f4f5;
                       border: 1px solid transparent;

                       &.con{
                        border: 1px solid #f03867;
                        color: #f03867;
                        background-color: #fff;
                       }
                    }
                }
            }

            .content-list{
                display: flex;
                width: 100%;
                justify-content: center;
                flex-direction: column;
                align-items: center;
                padding: 0 10px;
                box-sizing: border-box;

                .content-product-list{
                    
                    margin: 10px 0;
                    width: 100%;
                    // height: 143px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    background-color: #f3f4f5;
                    border-radius: 10px;
                    img{
                        margin: 15px;
                        height: 112px;
                    }

                    .product-right{
                        display: flex;
                        flex-direction: column;
                        padding-top: 15px;
                        box-sizing: border-box;
                        .right-header{
                            display: flex;
                            span{
                                height: 15px;
                                width: 43px;
                                background-color: #f8406e;
                                text-align: center;
                                color: #fff;
                                line-height: 15px;
                            }

                            i{
                                font-size: 16px;
                                color: #232323;

                            }
                            div{
                                font-size: 12px;
                                color: #9898a0;
                                text-decoration: line-through;
                                transform: scale(0.9);

                            }
                            b{
                                font-size: 12px;
                                color: #9898a0;
                                transform: scale(0.9);
                            }
                            
                        }

                        .right-content-text{
                            width: 230px;
                            margin-top: 30px;
                            font-size: 16px;
                            color: #585c64;
                            white-space: nowrap;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .right-content-bottom{
                            display: flex;
                            margin-top: 30px;
                            div{
                                background-color:#fde7ed ;
                                width: 68px;
                                height: 15px;
                                text-align: center;
                                margin-right: 5px;
                                line-height: 15px;
                                span{
                                    transform: scale(0.8);
                                    font-size: 12px;
                                    display: inline-block;
                                    color: #f03867;
                                }
                            }
                             div{
                                background-color:#fde7ed ;
                                width: 68px;
                                height: 15px;
                                text-align: center;
                                line-height: 15px;
                                i{
                                    transform: scale(0.8);
                                    font-size: 12px;
                                    display: inline-block;
                                    color: #f03867;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>